<template>
  <div class="hello">
    <h1>{{ msgReverse }}</h1>
    <div v-html="content" v-on:click=""></div>
    <template v-if="ok">aaa</template>
    <template v-else>bbb</template>

    <ul>
      <li v-for="user in users">
        {{user.username}} | {{user.age}}
      </li>
    </ul>

    <button v-on:click.stop="handlerAddUser">添加用户</button>
    <div @click.prevent="handlerAddUser" style="width: 500px;height: 500px; border:1px solid">
      <div style="width:200px; height: 200px;margin: 150px auto; border:1px solid">添加用户</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        content: '<h2>这是一个文章</h2>',
        ok: false,
        users: [{username: 'admin', age: 20}, {username: '张三', age: 30}],
      }
    },
    methods: {
      handlerAddUser() {
        this.users = [{username: 'xxx', age: 20}, {username: 'xxx', age: 30}];
      }
    },
    computed: {
      msgReverse(){
        return this.msg.split('').reverse().join('')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
